<template>
        <div>
                <van-nav-bar title="搜索页面"
                             left-text="返回"
                             right-text="..."
                             left-arrow
                             @click-left="$router.go(-1)" />

                <div class="searchbox">
                        <!-- v-model 表单数据绑定, 也是唯一一个具有双向数据绑定特点的指令 -->
                        <!-- v-model 指令主要配合表单元素使用 -->
                        <input type="text"
                               placeholder="输入关键词"
                               v-model="searchText">
                        <span @click="search">搜索</span>
                </div>
                <div class="block">
                        <div class="title">历史搜索</div>
                        <div class="list">
                                <span v-for="(item,index) in searchArr"
                                      :key="index"> {{item}} </span>
                        </div>
                </div>
        </div>
</template>

<script>
import { shop_search } from '../utils/api'
export default {
        data () {
                return {
                        searchText: '',
                        searchArr: [
                                '三文鱼', '刺身', '鲍鱼'
                        ],
                        searchlist: [],

                }
        },
        methods: {
                search () {

                        if (this.searchText != "") {

                                this.searchArr.push(this.searchText);


                                this.searchText = '';

                        }
                        this.$router.push('/searchview')
                },

        },
        mounted () {
                shop_search({ searchkey: "三文鱼" }).then((ok) => {
                        console.log(ok.data.list)
                        this.searchlist = ok.data.list
                })

        }

}
</script>

<style lang="scss" scoped>
.searchbox {
        margin: 10px;
        display: flex;
        align-items: center;
}
.searchbox input {
        flex: 1;
        height: 40px;
        background-color: #f5f5f5;
        outline: none;
        border: none;
        padding-left: 20px;
        border-radius: 20px;
}
.searchbox span {
        width: 60px;
        text-align: center;
}

.block {
        margin: 10px;
}
.block .title {
        font-weight: bold;
        padding: 10px 0;
}
.block .list span {
        display: inline-block;
        background-color: #f5f5f5;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 10px;
        margin-bottom: 10px;
}
</style>